import React from 'react';
import ReactDOM from 'react-dom';
import './tab.css'

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            c1: 'content active',
            c2: 'content'
        }

        // 将当前的this绑定到clickEvent(e)方法中；
        // 事件都是要绑定，绑定可以有其他方式的
        this.clickEvent = this.clickEvent.bind(this);
    }

    clickEvent(e) {
        console.log("click event");
        // console.log(e.target);
        console.log(e.target.dataset.index);
        let index = e.target.dataset.index
        if (index === 1) {
                {/* 默认这this绑定的是onclick，看夏敏的onclick的方法和this绑定 */}
            this.setState({
                c1: 'content active',
                c2: 'content'
            })
        } else {
            this.setState({
                c1: 'content',
                c2: 'content active'
            })
        }
    }

    render() {
        return (
            <div>
                {/* 默认这this绑定的是onclick */}
                <button data-index="1" onClick={this.clickEvent}>
                    内容1
                </button>
                <button data-index="2" onClick={this.clickEvent}>
                    内容2
                </button>
                <div className={this.state.c1}> 
                    <h1>内容1</h1>
                </div>
                <div className={this.state.c2}> 
                    <h1>内容2</h1>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<Clock />, document.querySelector('#root'));